<template>
  <div class="art-item-container" @click="Detail2(article.id)">
    <van-cell >
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{article.movie_introduce}}</span>
          <!-- 单张图片 -->
          <img :src="article.move_pic" alt="" class="thumb"  />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span
            >电影名:{{article.movie_name}}&nbsp;&nbsp;导演:{{article.movie_director}}   &nbsp;&nbsp; 票价:
            {{article.movie_price}}&nbsp;&nbsp; 时间:{{article.movie_time}}
            </span
          >
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ArticleItem',
  data() {
    return {
      isShow: false
    }
  },
  // 父子间调用，父亲的一些属性给子属性
  props: {
    // 文章的信息对象
    article: {
      type: Object,
      required: true
    }
  },
  methods: {
    Detail2(id) {
      // 子属性传给父亲的，这东西就是显示那个点击进去后的页面
      this.$emit('Detail2', id)
    }
  }
}
</script>

<style lang="less" scoped>
.art-item-container {
  border-bottom: 1px solid #f8f8f8;
}
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
